<template>
	<el-table-column v-bind="$attrs" :min-width="minWidth" show-overflow-tooltip>
		<template #default="{ row }">
			<el-select v-model="row[prop]" :disabled="!isEdit" :filter-method="filterMethod" filterable clearable>
				<el-option v-for="item in curOptions" :key="item.id" :label="item.mingCheng" :value="item.id" />
			</el-select>
		</template>
	</el-table-column>
</template>
<script lang="ts" setup>
// 简化表单中Select的代码
import PinyinMatch from 'pinyin-match'
import { isNull } from '/@/utils';

// 正常的列, 非定制化的 ,主要是为了统一默认列宽120
defineOptions({
	name: 'MkColumnSelect',
});

const props = defineProps({
	prop: {
		type: String,
		required: true,
	},
	isEdit: {
		type: Boolean,
		default: false,
	},
	autoWidth: {
		type: Boolean,
	},
	minWidth: {
		type: [String, Number],
		default: 120,
	},
	options: {
		type: Array as () => BasEntityType[],
		default: [],
		require: true
	},
});
/** 过滤显示的数据 */
const curOptions = ref<BasEntityType[]>([])

const filterMethod = (query: string) => {
	if (!isNull(query)) {
		curOptions.value = props.options.filter(item => {
			let values = JSON.stringify(item)
			return values.toLowerCase().indexOf(query.toLowerCase()) > -1 || PinyinMatch.match(values, query)
		})
	} else {
		curOptions.value = props.options
	}
}

</script>
<style lang="scss" scoped>
:deep(tbody .el-table__row) {
	.el-table__cell {
		text-align: center;
		padding: 0;
	}


	.cell {
		padding: 0;
		width: auto !important;
	}

	.el-table-column--selection .cell {
		padding: 0 40%;
	}

	.el-input {
		width: 100% !important;
	}
}
</style>